<template>
  <!--
  @name: HyElSelect
  @data: 2024/4/17 14:15
  二次封装element-select组件
-->
  <div id="hy-el-select">
    <span v-if="props.isReadonly">{{ form[props.field] }}</span>
    <el-select
      v-else
      v-model="form[props.field]"
      :multiple="props.isMultiple"
      :filterable="props.isFilterable"
      :loading-text="props.loadingText"
      :filter-method="props.filterMethod"
      @visible-change="props.visibleChange"
      @change="hyElSelectChange"
      :style="props.inputStyle"
    >
      <el-option v-for="(item,index) in selectOptionList"
                 :value="item[props.optionValueField]"
                 :label="item[props.optionLabelField]"
                 :key="item[props.optionKeyField]?item[props.optionKeyField]:index"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script setup lang="ts">
import {ref} from "vue";
import type {HySelectFormInterface} from "@/interface/HyFormInterface";
import {hyElementRequest} from "@/components/utils";
import {UserListPageVO} from "@/api/test";
const props = defineProps<HySelectFormInterface>();

const form = defineModel("form", {
  type: Object,
  default: () => {
  },
});
/**
 * 下拉列表
 * 如果有 url 请求接口了,以接口优先
 * 如果没有url,
 */
const selectOptionList=ref(props.optionList);

function hyElSelectChange(value:any) {
  console.log(41, value);
  // form[props.field]=value;
}

if (props.url) {
  hyElementRequest<any, any, UserListPageVO>(
    props.method,
    props.url,
    props.data,
    props.params,
    props.requestCallback,
    props.responseCallback
  ).then((result:any)=>{
    selectOptionList.value=result.data.data;
  },(error)=>{
    console.log(error);
  });
}

</script>
<style scoped>

</style>
